<template>
	<view class="login-box" v-show="isShow" @tap="loginBGClick">
		<view class="login-ipt" @click.stop="">
			<text>用户名</text>
			<input type="text" placeholder="username" v-model="username">
			<text>密码</text>
			<input type="password" placeholder="password" v-model="password">
			<button @click="doLogin">登录/注册</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-login",
		props:{
			isShow:{
				type:Boolean,
				default:false,
			}
		},
		data() {
			return {
				username:'',
				password:'',
			};
		},
		methods:{
			loginBGClick(){
				this.$emit('closelogin')
			},
			doLogin(){
				if(!this.username || !this.password) return
				let user = {
					name:this.username,
					password:this.password
				}
				uni.setStorageSync('token',JSON.stringify(user))
				this.username = ''
				this.password = ''
				this.loginBGClick()
				uni.navigateBack({delta:0})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-box{
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 9999;
		padding: 0 15px;
	}
	.login-ipt{
		padding: 15px 10px;
		background-color: #fff;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: calc(100% - 50px);
		text{
			width: 70px;
			line-height: 42px;
			display: inline-block;
		}
		input{
			width: calc(100% - 70px);
			height: 42px;
			border-bottom: 1px solid #ccc;
			display: inline-block;
			vertical-align: middle;
		}
		button{
			height: 40px;
			background-color: rgba(208,88,124, 0.5);
			color: #fff;
			width: 100%;
			margin-top:20px;
			&:active{
				background-color: rgba(208, 91, 117, 0.3);
			}
		}
	}
</style>